<template>
    <div>
        <table class="table table-bordered" v-for="list in data" :key="list.systemId" style="border-collapse:inherit">
            <tr>
                <td rowSpan="3"
                    style="text-align: center;width: 80px;border-right: 1px solid #eee">
                    {{list.systemName}}
                </td>
            </tr>
            <tr class="table_tr">
                <td style="border-bottom: 1px solid #eee">
                    需求权限
                </td>
                <td style="border-bottom: 1px solid #eee">
                    <RadioGroup v-model="list.requireManageFlag" @on-change="changeRequireFlag(list)">
                        <Radio label="readonly">只读</Radio>
                    </RadioGroup>
                </td>
                <td style="border-bottom: 1px solid #eee">
                    <RadioGroup v-model="list.requireManageFlag" @on-change="changeRequireFlag(list)">
                        <Radio label="operate">操作</Radio>
                    </RadioGroup>
                </td>
                <td rowSpan="2" style="text-align: center;border-left: 1px solid #eee">
                    <Button type="primary" size="small" @click="onSaveGroup(list)">保存</Button>
                </td>
            </tr>
            <tr class="table_tr">
                <td>
                    组权限
                </td>
                <td colSpan="3">
                    <Checkbox v-model="list.groupManageFlag" @on-change="onEnvPrivilegeChange(list)">操作</Checkbox>
                </td>
            </tr>
            <tr>

            </tr>
        </table>
    </div>
</template>
<script>
  export default {
    props: {
      data: Array,
      role: Object
    },
    data() {
      return {}
    },
    methods: {
      onEnvPrivilegeChange(env) {
      },
      changeRequireFlag(list) {

      },
      onSaveGroup(list) {
        let obj = {
          roleId: this.role.roleId,
          systemId: list.systemId,
          groupManageFlag: list.groupManageFlag,
          requireManageFlag: list.requireManageFlag
        };
        $.ajax("../api/systemmanage/rolemanage/grantRoleSysPermission", {
          method: "post",
          contentType: "application/json;charset=utf-8",
          data: JSON.stringify(obj),
          success: (data) => {
            if (data.code === 200) {
              this.$Notice.success({
                title: data.data
              })
            } else {
              this.$Notice.error({
                title: data.data
              })
            }
          }
        })
      }
    },
    mounted() {

    }
  }
</script>
<style scoped>
    td {
        padding: 10px;
    }
</style>
